<template>
  <!-- //todo:.sync继承问题需要修复 -->

  <el-form
    ref="validateForm"
    label-position="right"
    label-width="120px"
    :rules="rules"
    :model="formData"
  >
    <template v-for="(column, index) in columns" :key="column.id">
      <slot v-if="column.slot" :name="column.slot" :tit="index" />
      <!---- switch -------->
      <el-form-item
        v-else-if="column.type ==='switch' "
       
        :label="column.label"
      >
        <el-switch v-model="formData[column.field]" />
      </el-form-item>
      <!----  checkBoxGroup ----->
      <el-form-item
        v-else-if="column.type==='checkBoxGroup'"
       
        :label="column.label"
      >
        <el-checkbox-group v-model="formData[column.field]">
          <el-checkbox
            v-for="(item, i) in column.options"
            :key="i"
            :label="item"
          />
        </el-checkbox-group>
      </el-form-item>
      <!-- ------------- select ------------------ -->
      <el-form-item
        v-else-if="column.type === 'select'"
        :key="index"
        :label="column.label"
      >
        <el-select
          v-model="formData[column.field]"
          :placeholder="column.pre"
        >
          <el-option
            v-for="item in column.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- -------------input------------------ -->
      <el-form-item
        v-else
       
        :label="column.label"
        :rules="column.rules"
      >
        <el-input
          v-model="formData[column.field]"
          :disabled="column.disabled"
          :placeholder="column.pre"
        />
      </el-form-item>
      <!-- ----------------------- -->
    </template>
    <template v-if="operator">
      <el-form-item>
        <el-button type="primary" @click="onSubmit('validateForm')">立即创建</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </template>
  </el-form>

</template>
<script>
export default {
  name: 'TisDialog',
  props: {
    // data: {
    //   type: Object,
    //   default: () => {}
    // },
    columns: {
      type: Array,
      default: () => []
    },
    option: {
      type: Object,
      default: () => {
        return {
          title: 'title',
          visible: false
        }
      }
    },
    rules: {
      type: Object,
      default: () => {}
    },
    operator: {
      type: Boolean,
      default: () => true
    }
  },
  data() {
    return {
      formData: {}
    }
  },
  created() {
    this.columns.map(item => {
      // if (item.type === 'switch') {
      //   if (item.value === true) {
      //     this.formData[item.field] = 1
      //   } else {
      //     this.formData[item.field] = 0
      //   }
      // } else {
      //   this.formData[item.field] = item.value
      // }
      this.$set(this.formData, item.field, item.value || '')
    })
    // this.$set(this.formData, 'name', '')
  },
  methods: {
    onSubmit(formName) {
      // todo:这边需要做判断修改
      this.columns.map(item => {
        if (item.type === 'switch') {
          if (this.formData[item.field] === true) {
            this.formData[item.field] = 1
          } else {
            this.formData[item.field] = 0
          }
        }
        // else {
        //   this.formData[item.field] = item.value
        // }
      })

      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('submit', this.formData)
        }
        // else {
        //   this.$message.error('请输入验证信息')
        // }
      })
    },
    cancel() {
      this.option.visible = false
    },
    getFormData() {
      return this.formData
    },
    setFormData(value) {
      // todo: 验证出错需要优化
      if (typeof value !== 'object') {
        alert('更新数据格式出错')
      }
      // todo: 由于数据系统存储的是0,1 需要对0,1做true和false的转化
      Object.keys(value).forEach(key => {
        this.columns.filter(item => item.field === key)
          .map(item => {
            if (item.type === 'switch') {
              if (value[key] === 1) {
                //
                this.formData[item.field] = true
                // item.value = true
              } else {
                this.formData[item.field] = false
                // item.value = false
              }
            } else {
              this.formData[item.field] = value[key]
              // item.value = value[key]
            }
            // 更新数据时候需要把false设置回头
            if (item.disabled === false) {
              item.disabled = true
            }
          })
      })
    },
    clearFormData() {
      this.columns.map(item => {
        if (item.type !== undefined && item.type === 'switch') {
          this.formData[item.field] = false
          // item.value = false
        } else {
          // item.value = ''
          this.formData[item.field] = null
        }

        if (item.disabled !== undefined && item.disabled === true) {
          item.disabled = false
        }
      })
    }
  }
}
</script>
